<template>
    <div class="menu-modal">
        <modal-box @close="$emit('close')">
            <div class="title">
                新建清单
                <button @click="onClick">完成</button>
            </div>
            <div class="form">
                <label for="menuName">清单名</label>
                <input id="menuName" type="text" placeholder="输入清单名" v-model="name" />
            </div>
        </modal-box>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                name:""
            }
        },
        methods:{
            onClick(){
                this.$emit('add',this.name)
                this.name=''
            }
        }
    }
</script>

<style lang="sass" scoped>
.menu-modal
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    font-weight: bold
    .title
        display: flex
        justify-content: space-between
        font-size: 20px
        & button
            color: red
            background: transparent
    .form
        margin-top: 50px
        display: flex
        justify-content: space-between  
        font-size: 14px
        & input
            border-bottom: 1px solid #ccc
            font-size: 16px
</style>